
<!DOCTYPE HTML>
<html lang="zh-hans" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>介绍 · better-scroll</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-theme-vuejs/vue.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="./" />
    
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="输入并搜索" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter active" data-level="1.1" data-path="./">
            
                <a href="./">
            
                    
                    介绍
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.1.1" data-path="./">
            
                <a href="./#better-scroll 是什么">
            
                    
                    better-scroll 是什么
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.1.2" data-path="./">
            
                <a href="./#起步">
            
                    
                    起步
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.1.3" data-path="./">
            
                <a href="./#滚动原理">
            
                    
                    滚动原理
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.1.4" data-path="./">
            
                <a href="./#better-scroll-在-mvvm-框架的应用">
            
                    
                    better-scroll 在 MVVM 框架的应用
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="installation.html">
            
                <a href="installation.html">
            
                    
                    安装
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="installation.html">
            
                <a href="installation.html#npm">
            
                    
                    NPM
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="installation.html">
            
                <a href="installation.html#script-加载">
            
                    
                    script 加载
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="options.html">
            
                <a href="options.html">
            
                    
                    选项 / 基础
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="options.html">
            
                <a href="options.html#startx">
            
                    
                    startX
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="options.html">
            
                <a href="options.html#starty">
            
                    
                    startY
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="options.html">
            
                <a href="options.html#scrollx">
            
                    
                    scrollX
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.4" data-path="options.html">
            
                <a href="options.html#scrolly">
            
                    
                    scrollY
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.5" data-path="options.html">
            
                <a href="options.html#freescroll">
            
                    
                    freeScroll
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.6" data-path="options.html">
            
                <a href="options.html#directionlockthreshold">
            
                    
                    directionLockThreshold
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.7" data-path="options.html">
            
                <a href="options.html#eventpassthrough">
            
                    
                    eventPassthrough
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.8" data-path="options.html">
            
                <a href="options.html#click">
            
                    
                    click
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.9" data-path="options.html">
            
                <a href="options.html#dblclickv1120">
            
                    
                    dblclick
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.10" data-path="options.html">
            
                <a href="options.html#tap">
            
                    
                    tap
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.11" data-path="options.html">
            
                <a href="options.html#bounce">
            
                    
                    bounce
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.12" data-path="options.html">
            
                <a href="options.html#bouncetime">
            
                    
                    bounceTime
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.13" data-path="options.html">
            
                <a href="options.html#momentum">
            
                    
                    momentum
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.14" data-path="options.html">
            
                <a href="options.html#momentumlimittime">
            
                    
                    momentumLimitTime
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.15" data-path="options.html">
            
                <a href="options.html#momentumlimitdistance">
            
                    
                    momentumLimitDistance
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.16" data-path="options.html">
            
                <a href="options.html#swipetime">
            
                    
                    swipeTime
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.17" data-path="options.html">
            
                <a href="options.html#swipebouncetime">
            
                    
                    swipeBounceTime
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.18" data-path="options.html">
            
                <a href="options.html#deceleration">
            
                    
                    deceleration
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.19" data-path="options.html">
            
                <a href="options.html#flicklimittime">
            
                    
                    flickLimitTime
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.20" data-path="options.html">
            
                <a href="options.html#flicklimitdistance">
            
                    
                    flickLimitDistance
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.21" data-path="options.html">
            
                <a href="options.html#resizepolling">
            
                    
                    resizePolling
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.22" data-path="options.html">
            
                <a href="options.html#probetype">
            
                    
                    probeType
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.23" data-path="options.html">
            
                <a href="options.html#preventdefault">
            
                    
                    preventDefault
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.24" data-path="options.html">
            
                <a href="options.html#preventdefaultexception">
            
                    
                    preventDefaultException
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.25" data-path="options.html">
            
                <a href="options.html#hwcompositing">
            
                    
                    HWCompositing
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.26" data-path="options.html">
            
                <a href="options.html#usetransition">
            
                    
                    useTransition
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.27" data-path="options.html">
            
                <a href="options.html#usetransform">
            
                    
                    useTransform
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.28" data-path="options.html">
            
                <a href="options.html#bindtowrapper">
            
                    
                    bindToWrapper
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.29" data-path="options.html">
            
                <a href="options.html#disablemouse">
            
                    
                    disableMouse
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.30" data-path="options.html">
            
                <a href="options.html#disabletouch">
            
                    
                    disableTouch
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.31" data-path="options.html">
            
                <a href="options.html#observedomv153">
            
                    
                    observeDOM
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.32" data-path="options.html">
            
                <a href="options.html#autoblurv170">
            
                    
                    autoBlur
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.33" data-path="options.html">
            
                <a href="options.html#stoppropagationv190">
            
                    
                    stopPropagation
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="options-advanced.html">
            
                <a href="options-advanced.html">
            
                    
                    选项 / 高级
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="options-advanced.html">
            
                <a href="options-advanced.html#wheel">
            
                    
                    wheel
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="options-advanced.html">
            
                <a href="options-advanced.html#snap">
            
                    
                    snap
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="options-advanced.html">
            
                <a href="options-advanced.html#scrollbar">
            
                    
                    scrollbar
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="options-advanced.html">
            
                <a href="options-advanced.html#pulldownrefresh">
            
                    
                    pullDownRefresh
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="options-advanced.html">
            
                <a href="options-advanced.html#pullupload">
            
                    
                    pullUpLoad
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.6" data-path="options-advanced.html">
            
                <a href="options-advanced.html#mousewheelv180">
            
                    
                    mouseWheel
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.7" data-path="options-advanced.html">
            
                <a href="options-advanced.html#zoomv1110">
            
                    
                    zoom
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.8" data-path="options-advanced.html">
            
                <a href="options-advanced.html#infinityv1120">
            
                    
                    infinity
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="api.html">
            
                <a href="api.html">
            
                    
                    方法 / 通用
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="api.html">
            
                <a href="api.html#refresh">
            
                    
                    refresh
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="api.html">
            
                <a href="api.html#scrolltox-y-time-easing">
            
                    
                    scrollTo
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="api.html">
            
                <a href="api.html#scrollbyx-y-time-easing">
            
                    
                    scrollBy
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="api.html">
            
                <a href="api.html#scrolltoelementel-time-offsetx-offsety-easing">
            
                    
                    scrollToElement
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="api.html">
            
                <a href="api.html#stop">
            
                    
                    stop
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="api.html">
            
                <a href="api.html#enable">
            
                    
                    enable
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.7" data-path="api.html">
            
                <a href="api.html#disable">
            
                    
                    disable
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.8" data-path="api.html">
            
                <a href="api.html#destroy">
            
                    
                    destroy
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.9" data-path="api.html">
            
                <a href="api.html#ontype-fn-context">
            
                    
                    on
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.10" data-path="api.html">
            
                <a href="api.html#oncetype-fn-context">
            
                    
                    once
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.11" data-path="api.html">
            
                <a href="api.html#offtype-fn">
            
                    
                    off
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="api-specific.html">
            
                <a href="api-specific.html">
            
                    
                    方法 / 定制
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="api-specific.html">
            
                <a href="api-specific.html#gotopagex-y-time-easing">
            
                    
                    goToPage
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="api-specific.html">
            
                <a href="api-specific.html#nexttime-easing">
            
                    
                    next
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="api-specific.html">
            
                <a href="api-specific.html#prevtime-easing">
            
                    
                    prev
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="api-specific.html">
            
                <a href="api-specific.html#getcurrentpage">
            
                    
                    getCurrentPage
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="api-specific.html">
            
                <a href="api-specific.html#wheeltoindex">
            
                    
                    wheelTo
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="api-specific.html">
            
                <a href="api-specific.html#getselectedindex">
            
                    
                    getSelectedIndex
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="api-specific.html">
            
                <a href="api-specific.html#finishpulldown">
            
                    
                    finishPullDown
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="api-specific.html">
            
                <a href="api-specific.html#openpulldownconfig-v190">
            
                    
                    openPullDown
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="api-specific.html">
            
                <a href="api-specific.html#closepulldown-v190">
            
                    
                    closePullDown
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.10" data-path="api-specific.html">
            
                <a href="api-specific.html#autopulldownrefresh-v1140">
            
                    
                    autoPullDownRefresh
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.11" data-path="api-specific.html">
            
                <a href="api-specific.html#finishpullup">
            
                    
                    finishPullUp
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.12" data-path="api-specific.html">
            
                <a href="api-specific.html#openpullupconfig-v190">
            
                    
                    openPullUp
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.13" data-path="api-specific.html">
            
                <a href="api-specific.html#closepullup-v190">
            
                    
                    closePullUp
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.14" data-path="api-specific.html">
            
                <a href="api-specific.html#zoomtoscale-x-y-v1120">
            
                    
                    zoomTo
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="events.html">
            
                <a href="events.html">
            
                    
                    事件
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.7.1" data-path="events.html">
            
                <a href="events.html#beforescrollstart">
            
                    
                    beforeScrollStart
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.2" data-path="events.html">
            
                <a href="events.html#scrollstart">
            
                    
                    scrollStart
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.3" data-path="events.html">
            
                <a href="events.html#scroll">
            
                    
                    scroll
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.4" data-path="events.html">
            
                <a href="events.html#scrollcancel">
            
                    
                    scrollCancel
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.5" data-path="events.html">
            
                <a href="events.html#scrollend">
            
                    
                    scrollEnd
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.6" data-path="events.html">
            
                <a href="events.html#touchend">
            
                    
                    touchEnd
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.7" data-path="events.html">
            
                <a href="events.html#flick">
            
                    
                    flick
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.8" data-path="events.html">
            
                <a href="events.html#refresh">
            
                    
                    refresh
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.9" data-path="events.html">
            
                <a href="events.html#destroy">
            
                    
                    destroy
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.10" data-path="events.html">
            
                <a href="events.html#pullingdown">
            
                    
                    pullingDown
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.11" data-path="events.html">
            
                <a href="events.html#pullingup">
            
                    
                    pullingUp
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.12" data-path="events.html">
            
                <a href="events.html#zoomstart">
            
                    
                    zoomStart
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.13" data-path="events.html">
            
                <a href="events.html#zoomend">
            
                    
                    zoomEnd
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="property.html">
            
                <a href="property.html">
            
                    
                    属性
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.8.1" data-path="property.html">
            
                <a href="property.html#x">
            
                    
                    x
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.2" data-path="property.html">
            
                <a href="property.html#y">
            
                    
                    y
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.3" data-path="property.html">
            
                <a href="property.html#maxscrollx">
            
                    
                    maxScrollX
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.4" data-path="property.html">
            
                <a href="property.html#maxscrolly">
            
                    
                    maxScrollY
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.5" data-path="property.html">
            
                <a href="property.html#movingdirectionx">
            
                    
                    movingDirectionX
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.6" data-path="property.html">
            
                <a href="property.html#movingdirectiony">
            
                    
                    movingDirectionY
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.7" data-path="property.html">
            
                <a href="property.html#directionx">
            
                    
                    directionX
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.8" data-path="property.html">
            
                <a href="property.html#directiony">
            
                    
                    directionY
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.9" data-path="property.html">
            
                <a href="property.html#enabled">
            
                    
                    enabled
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.10" data-path="property.html">
            
                <a href="property.html#isintransition">
            
                    
                    isInTransition
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.11" data-path="property.html">
            
                <a href="property.html#isanimating">
            
                    
                    isAnimating
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            本书使用 GitBook 发布
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="." >介绍</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="&#x4ECB;&#x7ECD;">&#x4ECB;&#x7ECD;</h1>
<h2 id="better-scroll-&#x662F;&#x4EC0;&#x4E48;">better-scroll &#x662F;&#x4EC0;&#x4E48;</h2>
<p>better-scroll &#x662F;&#x4E00;&#x6B3E;&#x91CD;&#x70B9;&#x89E3;&#x51B3;&#x79FB;&#x52A8;&#x7AEF;&#xFF08;&#x5DF2;&#x652F;&#x6301; PC&#xFF09;&#x5404;&#x79CD;&#x6EDA;&#x52A8;&#x573A;&#x666F;&#x9700;&#x6C42;&#x7684;&#x63D2;&#x4EF6;&#x3002;&#x5B83;&#x7684;&#x6838;&#x5FC3;&#x662F;&#x501F;&#x9274;&#x7684; <a href="https://github.com/cubiq/iscroll" target="_blank">iscroll</a> &#x7684;&#x5B9E;&#x73B0;&#xFF0C;&#x5B83;&#x7684; API &#x8BBE;&#x8BA1;&#x57FA;&#x672C;&#x517C;&#x5BB9; iscroll&#xFF0C;&#x5728; iscroll &#x7684;&#x57FA;&#x7840;&#x4E0A;&#x53C8;&#x6269;&#x5C55;&#x4E86;&#x4E00;&#x4E9B; feature &#x4EE5;&#x53CA;&#x505A;&#x4E86;&#x4E00;&#x4E9B;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x3002;</p>
<p>better-scroll &#x662F;&#x57FA;&#x4E8E;&#x539F;&#x751F; JS &#x5B9E;&#x73B0;&#x7684;&#xFF0C;&#x4E0D;&#x4F9D;&#x8D56;&#x4EFB;&#x4F55;&#x6846;&#x67B6;&#x3002;&#x5B83;&#x7F16;&#x8BD1;&#x540E;&#x7684;&#x4EE3;&#x7801;&#x5927;&#x5C0F;&#x662F; 63kb&#xFF0C;&#x538B;&#x7F29;&#x540E;&#x662F; 35kb&#xFF0C;gzip &#x540E;&#x4EC5;&#x6709; 9kb&#xFF0C;&#x662F;&#x4E00;&#x6B3E;&#x975E;&#x5E38;&#x8F7B;&#x91CF;&#x7684; JS lib&#x3002;</p>
<h2 id="&#x8D77;&#x6B65;">&#x8D77;&#x6B65;</h2>
<p>&#x5B66;&#x4E60;&#x4F7F;&#x7528; better-scroll &#x6700;&#x597D;&#x7684;&#x65B9;&#x5F0F;&#x662F;&#x770B;&#x5B83;&#x7684; demo &#x4EE3;&#x7801;&#xFF0C;&#x6211;&#x4EEC;&#x628A;&#x4EE3;&#x7801;&#x90FD;&#x653E;&#x5728;&#x4E86; <a href="https://github.com/ustbhuangyi/better-scroll/tree/master/example" target="_blank">example</a> &#x76EE;&#x5F55;&#x3002;&#x7531;&#x4E8E;&#x76EE;&#x524D;&#x6700;&#x9002;&#x5408;&#x79FB;&#x52A8;&#x7AEF;&#x5F00;&#x53D1;&#x7684;&#x524D;&#x7AEF; mvvm &#x6846;&#x67B6;&#x662F; <a href="https://github.com/vuejs/vue" target="_blank">Vue</a>&#xFF0C;&#x5E76;&#x4E14; better-scroll &#x53EF;&#x4EE5;&#x5F88;&#x597D;&#x7684;&#x548C; Vue &#x914D;&#x5408;&#x4F7F;&#x7528;&#x7684;&#xFF0C;&#x6240;&#x4EE5; demo &#x6211;&#x90FD;&#x7528; Vue &#x8FDB;&#x884C;&#x4E86;&#x91CD;&#x5199;&#x3002;</p>
<p>better-scroll &#x6700;&#x5E38;&#x89C1;&#x7684;&#x5E94;&#x7528;&#x573A;&#x666F;&#x662F;&#x5217;&#x8868;&#x6EDA;&#x52A8;&#xFF0C;&#x6211;&#x4EEC;&#x6765;&#x770B;&#x4E00;&#x4E0B;&#x5B83;&#x7684; html &#x7ED3;&#x6784;</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;wrapper&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;content&quot;</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    ...
  <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
  <span class="hljs-comment">&lt;!-- &#x8FD9;&#x91CC;&#x53EF;&#x4EE5;&#x653E;&#x4E00;&#x4E9B;&#x5176;&#x5B83;&#x7684; DOM&#xFF0C;&#x4F46;&#x4E0D;&#x4F1A;&#x5F71;&#x54CD;&#x6EDA;&#x52A8; --&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<p>&#x4E0A;&#x9762;&#x7684;&#x4EE3;&#x7801;&#x4E2D; better-scroll &#x662F;&#x4F5C;&#x7528;&#x5728;&#x5916;&#x5C42; wrapper &#x5BB9;&#x5668;&#x4E0A;&#x7684;&#xFF0C;&#x6EDA;&#x52A8;&#x7684;&#x90E8;&#x5206;&#x662F; content &#x5143;&#x7D20;&#x3002;&#x8FD9;&#x91CC;&#x8981;&#x6CE8;&#x610F;&#x7684;&#x662F;&#xFF0C;better-scroll &#x53EA;&#x5904;&#x7406;&#x5BB9;&#x5668;&#xFF08;wrapper&#xFF09;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x5B50;&#x5143;&#x7D20;&#xFF08;content&#xFF09;&#x7684;&#x6EDA;&#x52A8;&#xFF0C;&#x5176;&#x5B83;&#x7684;&#x5143;&#x7D20;&#x90FD;&#x4F1A;&#x88AB;&#x5FFD;&#x7565;&#x3002;</p>
<p>&#x6700;&#x7B80;&#x5355;&#x7684;&#x521D;&#x59CB;&#x5316;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> BScroll <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;better-scroll&apos;</span>
<span class="hljs-keyword">let</span> wrapper = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&apos;.wrapper&apos;</span>)
<span class="hljs-keyword">let</span> scroll = <span class="hljs-keyword">new</span> BScroll(wrapper)
</code></pre>
<p>better-scroll &#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x4E2A;&#x7C7B;&#xFF0C;&#x5B9E;&#x4F8B;&#x5316;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x53C2;&#x6570;&#x662F;&#x4E00;&#x4E2A;&#x539F;&#x751F;&#x7684; DOM &#x5BF9;&#x8C61;&#x3002;&#x5F53;&#x7136;&#xFF0C;&#x5982;&#x679C;&#x4F20;&#x9012;&#x7684;&#x662F;&#x4E00;&#x4E2A;&#x5B57;&#x7B26;&#x4E32;&#xFF0C;better-scroll &#x5185;&#x90E8;&#x4F1A;&#x5C1D;&#x8BD5;&#x8C03;&#x7528; querySelector &#x53BB;&#x83B7;&#x53D6;&#x8FD9;&#x4E2A; DOM &#x5BF9;&#x8C61;&#xFF0C;&#x6240;&#x4EE5;&#x521D;&#x59CB;&#x5316;&#x4EE3;&#x7801;&#x4E5F;&#x53EF;&#x4EE5;&#x662F;&#x8FD9;&#x6837;&#xFF1A;</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> BScroll <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;better-scroll&apos;</span>
<span class="hljs-keyword">let</span> scroll = <span class="hljs-keyword">new</span> BScroll(<span class="hljs-string">&apos;.wrapper&apos;</span>)
</code></pre>
<h2 id="&#x6EDA;&#x52A8;&#x539F;&#x7406;">&#x6EDA;&#x52A8;&#x539F;&#x7406;</h2>
<p>&#x5F88;&#x591A;&#x4EBA;&#x5DF2;&#x7ECF;&#x7528;&#x8FC7; better-scroll&#xFF0C;&#x6211;&#x6536;&#x5230;&#x53CD;&#x9988;&#x6700;&#x591A;&#x7684;&#x95EE;&#x9898;&#x662F;&#xFF1A;</p>
<blockquote>
<p>better-scroll &#x521D;&#x59CB;&#x5316;&#x4E86;&#xFF0C; &#x4F46;&#x662F;&#x6CA1;&#x6CD5;&#x6EDA;&#x52A8;&#x3002;</p>
</blockquote>
<p>&#x4E0D;&#x80FD;&#x6EDA;&#x52A8;&#x662F;&#x73B0;&#x8C61;&#xFF0C;&#x6211;&#x4EEC;&#x5F97;&#x641E;&#x6E05;&#x695A;&#x8FD9;&#x5176;&#x4E2D;&#x7684;&#x6839;&#x672C;&#x539F;&#x56E0;&#x3002;&#x5728;&#x8FD9;&#x4E4B;&#x524D;&#xFF0C;&#x6211;&#x4EEC;&#x5148;&#x6765;&#x770B;&#x4E00;&#x4E0B;&#x6D4F;&#x89C8;&#x5668;&#x7684;&#x6EDA;&#x52A8;&#x539F;&#x7406;&#xFF1A;
&#x6D4F;&#x89C8;&#x5668;&#x7684;&#x6EDA;&#x52A8;&#x6761;&#x5927;&#x5BB6;&#x90FD;&#x4F1A;&#x9047;&#x5230;&#xFF0C;&#x5F53;&#x9875;&#x9762;&#x5185;&#x5BB9;&#x7684;&#x9AD8;&#x5EA6;&#x8D85;&#x8FC7;&#x89C6;&#x53E3;&#x9AD8;&#x5EA6;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4F1A;&#x51FA;&#x73B0;&#x7EB5;&#x5411;&#x6EDA;&#x52A8;&#x6761;&#xFF1B;&#x5F53;&#x9875;&#x9762;&#x5185;&#x5BB9;&#x7684;&#x5BBD;&#x5EA6;&#x8D85;&#x8FC7;&#x89C6;&#x53E3;&#x5BBD;&#x5EA6;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4F1A;&#x51FA;&#x73B0;&#x6A2A;&#x5411;&#x6EDA;&#x52A8;&#x6761;&#x3002;&#x4E5F;&#x5C31;&#x662F;&#x5F53;&#x6211;&#x4EEC;&#x7684;&#x89C6;&#x53E3;&#x5C55;&#x793A;&#x4E0D;&#x4E0B;&#x5185;&#x5BB9;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4F1A;&#x901A;&#x8FC7;&#x6EDA;&#x52A8;&#x6761;&#x7684;&#x65B9;&#x5F0F;&#x8BA9;&#x7528;&#x6237;&#x6EDA;&#x52A8;&#x5C4F;&#x5E55;&#x770B;&#x5230;&#x5269;&#x4F59;&#x7684;&#x5185;&#x5BB9;&#x3002;</p>
<p>better-scroll &#x4E5F;&#x662F;&#x4E00;&#x6837;&#x7684;&#x539F;&#x7406;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x7528;&#x4E00;&#x5F20;&#x56FE;&#x66F4;&#x76F4;&#x89C2;&#x7684;&#x611F;&#x53D7;&#x4E00;&#x4E0B;&#xFF1A;</p>
<p><img src="http://static.galileo.xiaojukeji.com/static/tms/shield/scroll-4.png" alt="&#x5E03;&#x5C40;"></p>
<p>&#x7EFF;&#x8272;&#x90E8;&#x5206;&#x4E3A; wrapper&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x7236;&#x5BB9;&#x5668;&#xFF0C;&#x5B83;&#x4F1A;&#x6709;<strong>&#x56FA;&#x5B9A;&#x7684;&#x9AD8;&#x5EA6;</strong>&#x3002;&#x9EC4;&#x8272;&#x90E8;&#x5206;&#x4E3A; content&#xFF0C;&#x5B83;&#x662F;&#x7236;&#x5BB9;&#x5668;&#x7684;<strong>&#x7B2C;&#x4E00;&#x4E2A;&#x5B50;&#x5143;&#x7D20;</strong>&#xFF0C;&#x5B83;&#x7684;&#x9AD8;&#x5EA6;&#x4F1A;&#x968F;&#x7740;&#x5185;&#x5BB9;&#x7684;&#x5927;&#x5C0F;&#x800C;&#x6491;&#x9AD8;&#x3002;&#x90A3;&#x4E48;&#xFF0C;&#x5F53; content &#x7684;&#x9AD8;&#x5EA6;&#x4E0D;&#x8D85;&#x8FC7;&#x7236;&#x5BB9;&#x5668;&#x7684;&#x9AD8;&#x5EA6;&#xFF0C;&#x662F;&#x4E0D;&#x80FD;&#x6EDA;&#x52A8;&#x7684;&#xFF0C;&#x800C;&#x5B83;&#x4E00;&#x65E6;&#x8D85;&#x8FC7;&#x4E86;&#x7236;&#x5BB9;&#x5668;&#x7684;&#x9AD8;&#x5EA6;&#xFF0C;&#x6211;&#x4EEC;&#x5C31;&#x53EF;&#x4EE5;&#x6EDA;&#x52A8;&#x5185;&#x5BB9;&#x533A;&#x4E86;&#xFF0C;&#x8FD9;&#x5C31;&#x662F; better-scroll &#x7684;&#x6EDA;&#x52A8;&#x539F;&#x7406;&#x3002;</p>
<h2 id="better-scroll-&#x5728;-mvvm-&#x6846;&#x67B6;&#x7684;&#x5E94;&#x7528;">better-scroll &#x5728; MVVM &#x6846;&#x67B6;&#x7684;&#x5E94;&#x7528;</h2>
<p>&#x6211;&#x4E4B;&#x524D;&#x5199;&#x8FC7;&#x4E00;&#x7BC7;<a href="https://zhuanlan.zhihu.com/p/27407024" target="_blank">&#x5F53; better-scroll &#x9047;&#x89C1; Vue</a>&#xFF0C;&#x4E5F;&#x5E0C;&#x671B;&#x5927;&#x5BB6;&#x6295;&#x7A3F;&#xFF0C;&#x5206;&#x4EAB;&#x4E00;&#x4E0B; better-scroll &#x5728;&#x5176;&#x5B83;&#x6846;&#x67B6;&#x4E0B;&#x7684;&#x4F7F;&#x7528;&#x5FC3;&#x5F97;&#x3002;</p>
<p>&#x4E00;&#x6B3E;&#x8D85;&#x8D5E;&#x7684;&#x57FA;&#x4E8E; Vue &#x5B9E;&#x73B0;&#x7684;&#x7EC4;&#x4EF6;&#x5E93; <a href="https://github.com/didi/cube-ui/" target="_blank">cube-ui</a>&#x3002;</p>
<h2 id="better-scroll-&#x5728;&#x5B9E;&#x6218;&#x9879;&#x76EE;&#x4E2D;&#x7684;&#x8FD0;&#x7528;">better-scroll &#x5728;&#x5B9E;&#x6218;&#x9879;&#x76EE;&#x4E2D;&#x7684;&#x8FD0;&#x7528;</h2>
<p>&#x5982;&#x679C;&#x4F60;&#x60F3;&#x5B66;&#x4E60; better-scroll &#x5728;&#x5B9E;&#x6218;&#x9879;&#x76EE;&#x4E2D;&#x7684;&#x8FD0;&#x7528;&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x53BB;&#x5B66;&#x4E60;&#x6211;&#x7684; 2 &#x95E8;&#x5B9E;&#x6218;&#x8BFE;&#x7A0B;&#x3002;</p>
<p><a href="https://coding.imooc.com/class/74.html" target="_blank">Vue.js &#x9AD8;&#x4EFF;&#x5916;&#x5356;&#x997F;&#x4E86;&#x4E48;&#x5B9E;&#x6218;&#x8BFE;&#x7A0B;</a></p>
<p><a href="http://ustbhuangyi.com/sell/" target="_blank">&#x9879;&#x76EE;&#x6F14;&#x793A;&#x5730;&#x5740;</a></p>
<p><img src="https://qr.api.cli.im/qr?data=http%253A%252F%252Fustbhuangyi.com%252Fsell%252F%2523%252Fgoods&amp;level=H&amp;transparent=false&amp;bgcolor=%23ffffff&amp;forecolor=%23000000&amp;blockpixel=12&amp;marginblock=1&amp;logourl=&amp;size=280&amp;kid=cliim&amp;key=686203a49c4613080b5b3004323ff977" alt="&#x4E8C;&#x7EF4;&#x7801;"></p>
<p><a href="http://coding.imooc.com/class/107.html" target="_blank">Vue.js &#x97F3;&#x4E50; App &#x9AD8;&#x7EA7;&#x5B9E;&#x6218;&#x8BFE;&#x7A0B;</a></p>
<p><a href="http://ustbhuangyi.com/music/" target="_blank">&#x9879;&#x76EE;&#x6F14;&#x793A;&#x5730;&#x5740;</a></p>
<p><img src="https://qr.api.cli.im/qr?data=http%253A%252F%252Fustbhuangyi.com%252Fmusic%252F&amp;level=H&amp;transparent=false&amp;bgcolor=%23ffffff&amp;forecolor=%23000000&amp;blockpixel=12&amp;marginblock=1&amp;logourl=&amp;size=280&amp;kid=cliim&amp;key=731bbcc2b490454d2cc604f98539952c" alt="&#x4E8C;&#x7EF4;&#x7801;"></p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                
                <a href="./#better-scroll 是什么" class="navigation navigation-next navigation-unique" aria-label="Next page: better-scroll 是什么">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"介绍","level":"1.1","depth":1,"next":{"title":"better-scroll 是什么","level":"1.1.1","depth":2,"anchor":"#better-scroll 是什么","path":"README.md","ref":"README.md#better-scroll 是什么","articles":[]},"dir":"ltr"},"config":{"plugins":["scripts","edit-link","theme-vuejs@git+https://github.com/pearofducks/gitbook-plugin-theme-vuejs.git","-fontsettings"],"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"edit-link":{"label":"Edit This Page","base":"https://github.com/ustbhuangyi/better-scroll/tree/master/doc"},"scripts":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":false,"twitter":false,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"theme-vuejs":{},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"better-scroll","language":"zh-hans","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"*"},"file":{"path":"README.md","mtime":"2019-03-05T08:08:05.496Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2019-03-13T02:30:36.564Z"},"basePath":".","book":{"language":"zh-hans"}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-edit-link/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    

    </body>
</html>

